8. Навигация

Создайте веб-страницу с header (шапкой), которая будет содержать логотип и навигационное меню. В меню будут такие пункты, как Главная, О нас, Услуги, Контакты. Все элементы должны быть выровнены по горизонтали и эстетично стилизованы.

Шаг 1. Создаём HTML-файл

Цель: Создать структуру страницы и разметку header.

  1. Создайте файл с именем index.html.
  2. Вставьте следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример шапки с навигацией</title>
    <link rel="stylesheet" href="styles.css"> <!-- Подключаем файл стилей -->
</head>
<body>

    <!-- Шапка с логотипом и навигацией -->
    <header>
        <div class="logo">
            <h1>Мой Сайт</h1> <!-- Логотип сайта -->
        </div>

        <!-- Навигационное меню -->
        <nav>
            <ul class="nav-menu">
                <li><a href="#home">Главная</a></li>
                <li><a href="#about">О нас</a></li>
                <li><a href="#services">Услуги</a></li>
                <li><a href="#contacts">Контакты</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>Добро пожаловать на наш сайт!</h2>
        <p>Здесь вы найдёте полезную информацию о нас и наших услугах.</p>
    </main>

</body>
</html>

Что здесь происходит?

  • <header> — Секция "шапка" страницы, которая включает логотип и навигацию.
  • <div class="logo"> — Контейнер для логотипа. Здесь мы используем простой текстовый логотип, но в реальных проектах можно добавить изображение.
  • <nav> — Содержит навигационное меню.
  • <ul class="nav-menu"> — Это список навигации, а теги <li> представляют собой пункты меню.
  • <a href="#"> — Ссылки на разделы страницы. Знак # — это якорная ссылка, которая позволяет ссылаться на разделы внутри текущей страницы.

Шаг 2. Стилизация навигации через CSS

Цель: Стилизовать шапку и навигацию, чтобы сделать её красивой и удобной для пользователя.

  1. Создайте файл с именем styles.css в той же папке, где находится index.html.
  2. Вставьте следующий CSS-код:
/* Стили для всего документа */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    line-height: 1.6;
}

/* Стили для шапки */
header {
    display: flex; /* Делаем flex-контейнер */
    justify-content: space-between; /* Разделяем логотип и меню по краям */
    align-items: center; /* Выравниваем элементы по вертикали */
    padding: 20px;
    background-color: #009879; /* Цвет фона шапки */
    color: white; /* Цвет текста */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Лёгкая тень */
}

/* Стили для логотипа */
.logo h1 {
    font-size: 24px;
    font-weight: bold;
}

/* Стили для навигации */
nav ul.nav-menu {
    display: flex; /* Горизонтальное расположение пунктов меню */
    list-style: none; /* Убираем маркеры списка */
}

nav ul.nav-menu li {
    margin-right: 20px; /* Отступ между элементами меню */
}

nav ul.nav-menu li:last-child {
    margin-right: 0; /* Убираем отступ у последнего элемента */
}

nav ul.nav-menu a {
    text-decoration: none; /* Убираем подчёркивание */
    color: white; /* Цвет текста */
    font-size: 18px;
    transition: color 0.3s ease; /* Эффект изменения цвета при наведении */
}

nav ul.nav-menu a:hover {
    color: #f4f4f9; /* Цвет при наведении */
}

Что здесь происходит?

  • *`(универсальный селектор)** — Сбрасывает отступы и изменяетbox-sizing` для всех элементов.
  • header — Flex-контейнер для размещения логотипа и меню по сторонам.
  • display: flex — Используется для горизонтального выравнивания элементов (logo и nav).
  • justify-content: space-between — Разделяет логотип и навигацию по разным сторонам.
  • align-items: center — Центрирует элементы по вертикали.
  • nav ul.nav-menu — Flex-контейнер для элементов меню.
  • list-style: none — Убирает маркеры списка.
  • nav ul.nav-menu a — Стилизация ссылок меню. Убираем подчёркивание и добавляем переход на изменение цвета.